<template>
  <div>
    <el-form :model="form" ref="form" label-width="auto" label-position="right" inline hide-required-asterisk :show-message="false" class="card">
      <el-row>
        <el-col :span="5"><div class="item">子订单号：{{detail.orderSubNo}}</div></el-col>
        <el-col :span="5"><div class="item">异常类型：{{parseStatus(dict, 'exception_type', detail.type)}}</div></el-col>
        <el-col :span="4"><div class="item">责任人：{{detail.chargeUserName}}</div></el-col>
        <el-col :span="4"><div class="item">制单人：{{detail.orderCreateUserName}}</div></el-col>
        <el-col :span="5"><div class="item">已超时：{{detail.overTimeStr}}</div></el-col>
        <!-- <el-col :span="5"><div class="item">公司名称：{{$attrs.query.customer.name ? $attrs.query.customer.name : '-'}}</div></el-col> -->
      </el-row>
      <el-row>
<!--        <el-col :span="5"><div class="item">　出发地：{{detail.startCode ? parseCityCode(detail.startCode).slice(1).join('/') : '-'}}</div></el-col>-->
<!--        <el-col :span="5"><div class="item">　目的地：{{detail.destinationCode ? parseCityCode(detail.destinationCode).slice(1).join('/') : '-'}}</div></el-col>-->
        <el-col :span="4"><div class="item">　车型：{{detail.carName ? detail.carName : '-'}}</div></el-col>
        <el-col :span="10"><div class="item">车架号：{{detail.vin ? detail.vin : '-'}}</div></el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col>
          <el-form-item label="处理说明：" prop="result" :rules="[{required: true}]">
            <el-input v-model="form.result" placeholder="请输入" type="textarea" :rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20" v-for="(row, index) in form.customerLinkmanList" :key="'linkManInfo' + index">
        <el-col :span="5"><el-form-item label="联系人" :prop="'customerLinkmanList.'+ index +'.name'" required :show-message="false" :rules="{require: true}"><el-input v-model="row.name" clearable placeholder="请输入" /></el-form-item></el-col>
        <el-col :span="5"><el-form-item label="联系电话" :prop="'customerLinkmanList.'+ index +'.phone'" required :show-message="false" :rules="{require: true, type: 'number'}"><el-input-number v-model.number="row.phone" :precision="0" :controls="false" placeholder="请输入" /></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="城市名称" :prop="'customerLinkmanList.'+ index +'.city'" required :show-message="false" :rules="{require: true, type: 'number'}"><ad-city-select v-model.number="row.city" :options="cityList2" :props="{expandTrigger: 'hover'}" filterable clearable /></el-form-item></el-col>
        <el-col :span="4" class="pull"><el-form-item label="类型" :prop="'customerLinkmanList.'+ index +'.type'" required :show-message="false" :rules="{require: true, type: 'number'}"><el-select v-model.number="row.type" clearable><el-option v-for="{id, label, value} in dict.customer_linkman_type" :key="id" :label="label" :value="Number(value)" /></el-select></el-form-item></el-col>
        <el-col :span="4" v-if="$attrs.mode === 'c'"><el-button size="mini" v-if="index === 0" @click="addLinkManInfo">添加</el-button><el-button size="mini" :disabled="form.customerLinkmanList.length === 1" @click="delLinkManInfo(index)">删除</el-button></el-col>
      </el-row> -->
    </el-form>
    <el-row type="flex" justify="end">
      <el-col style="text-align: center"><el-button class="form-btn" type="primary" :loading="saving" @click="save">保存</el-button><el-button class="form-btn" type="primary" plain @click="$emit('update:show', false)">取消</el-button></el-col>
    </el-row>
  </div>
</template>

<script>
import AdCitySelect from '@/components/AdCitySelect'
import { parseTime } from '@/utils'
import { parseStatus, parseCityCode } from '@/utils/code'
// import { regionData, provinceAndCityData } from 'element-china-area-data'
// import { get, add, update } from '@/api/order/exception'
import { add } from '@/api/order/exception'

class Form {
  result = ''
}

export default {
  components: { AdCitySelect },
  dicts: ['exception_type'],
  data() {
    return {
      detail: {},
      saving: false,
      // cityList: regionData,
      cityList: [],
      // cityList2: provinceAndCityData,
      cityList2: [],
      form: new Form()
    }
  },
  created() {
    this.detail = this.$attrs.query.detail
  },
  watch: {
    '$attrs.show': {
      immediate: true,
      handler(show) {
        if (show) {
          if (this.$attrs.mode === 'r') {
            this.loadData(this.$attrs.query.id)
          }
        }
      }
    }
  },
  methods: {
    parseStatus, parseTime, parseCityCode,
    addLineWay() {
      this.form.customerLineList.push( new LineWay() )
    },
    delLineWay(index) {
      this.form.customerLineList.splice(index, 1)
    },
    addLinkManInfo() {
      this.form.customerLinkmanList.push( new LinkManInfo() )
    },
    delLinkManInfo(index) {
      this.form.customerLinkmanList.splice(index, 1)
    },
    save() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.saving = true
          this.saveData()
        }
      })
    },

    loadData(id) {
      // get(id).then(res => {
      //   this.$emit('loading', false)
      //   if (this.$attrs.mode === 'r' || this.$attrs.mode === 'u') {
      //     this.form.customerLinkmanList = [ res.data ]
      //   } else {
      //     this.form = res.data
      //   }
      // }).catch(() => {
      //   this.$emit('loading', false)
      // })
    },
    saveData() {
      switch (this.$attrs.mode) {
        case 'c':
          add({...this.form, abnormalId: this.$attrs.query.id}).then(() => {
            this.saving = false
            this.$emit('update:show', false)
            this.$emit('refresh')
          }).catch(() => {
            this.saving = false
          })
          break
        case 'r':
          // update({...this.form.customerLinkmanList[0], id: this.$attrs.query.id}).then(() => {
          //   this.saving = false
          //   this.$emit('update:show', false)
          //   this.$emit('refresh')
          // }).catch(() => {
          //   this.saving = false
          // })
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
/deep/.el-form-item { display: flex !important; margin-bottom: 20px; margin-right: 0;
  .el-form-item__content { flex: 1; line-height: 28px; }
  .el-form-item__label { line-height: 28px; font-size: 12px; font-weight: normal; }
  .el-input { line-height: 1; }
  .el-input-number { width: 100%; }
  .el-input__inner { width: 100%; height: 28px; border-radius: 2px; }
  .el-input__suffix .el-input__icon { line-height: 1; }
  .el-cascader { width: 100%; line-height: 1; }}
.el-button--mini { padding-top: 0; padding-bottom: 0; line-height: 26px; }
.form-btn { padding: 0 40px; line-height: 30px; }
.el-divider--horizontal { margin-bottom: 20px; }

.item { margin-bottom: 20px; line-height: 28px; }
.pull /deep/.el-form-item__label-wrap { margin-left: 0 !important; }
.card { padding: 20px 20px 0 20px; }
</style>
